import {geoCoordMap} from "@/assets/geoMap";
import * as echarts from 'echarts' // echarts 5 导入方式
import {useCounterStore} from "@/stores";

export const initMap = () => {
	const store = useCounterStore();
	const city = store.list.diseaseh5Shelf.areaTree[0].children;
	store.item = city[2].children
	const data = city.map(v => {
		// console.log(v.name, geoCoordMap[v.name].concat(v.total.nowConfirm))
		return {
			name: v.name,
			value: geoCoordMap[v.name].concat(v.total.nowConfirm),
			children: v.children
		}
	});
	const charts = echarts.init(document.querySelector('#chinaMap') as HTMLElement);
	charts.setOption({
		geo: {
			map: "china",
			aspectScale: 0.8,
			layoutCenter: ["50%", "50%"],
			layoutSize: "120%",
			itemStyle: {
				//normal: {
				areaColor: {
					type: "linear-gradient",
					x: 0,
					y: 1200,
					x2: 1000,
					y2: 0,
					colorStops: [
						{
							offset: 0,
							color: "#152E6E", // 0% 处的颜色
						},
						{
							offset: 1,
							color: "#0673AD", // 50% 处的颜色
						},
					],
					global: true, // 缺省为 false
				},
				shadowColor: "#0f5d9d",
				shadowOffsetX: 0,
				shadowOffsetY: 15,
				opacity: 0.5,
				//},
			},
			emphasis: {
				areaColor: "#0f5d9d",
			},
			regions: [
				{
					name: "南海诸岛",
					itemStyle: {
						areaColor: "rgba(0, 10, 52, 1)",
						borderColor: "rgba(0, 10, 52, 1)",
						opacity: 0,
						label: {
							show: false,
							color: "#009cc9",
						},
						/*normal: {
							opacity: 0,
							label: {
								show: false,
								color: "#009cc9",
							},
						},*/
					},
					label: {
						show: false,
						color: "#FFFFFF",
						fontSize: 12,
					},
				},
			],
		},
		series: [
			{
				type: "map",
				map: "china",
				aspectScale: 0.8,
				layoutCenter: ["50%", "50%"], //地图位置
				layoutSize: "120%",
				zoom: 1, //当前视角的缩放比例
				// roam: true, //是否开启平游或缩放
				scaleLimit: {
					//滚轮缩放的极限控制
					min: 1,
					max: 2,
				},
				label: {
					show: true,
					color: "#FFFFFF",
					fontSize: 12,
				},
				itemStyle: {
					areaColor: "#0c3653",
					borderColor: "#1cccff",
					borderWidth: 1.8,
					/*normal: {
						areaColor: "#0c3653",
						borderColor: "#1cccff",
						borderWidth: 1.8,
					},*/
				},
				emphasis: {
					areaColor: "#56b1da",
					label: {
						show: true,
						color: "#fff",
					},
				},
				data: data,
			},
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				//   symbol: 'image://http://ssq168.shupf.cn/data/biaoji.png',
				// symbolSize: [30,120],
				// symbolOffset:[0, '-40%'] ,
				symbol: 'pin',
				symbolSize: [45, 45],
				label: {
					/*normal: {
						show: true,
					}*/
					show: true,
					color: '#fff',
					formatter(value: any) {
						return value.data.value[2]
					}
				},
				itemStyle: {
					color: '#5790e7', //标志颜色
					/*normal: {
						color: '#D8BC37', //标志颜色
					}*/
				},
				data: data
			},
		],
	})

	charts.on('click', (e: any) => {
		console.log(e)
		store.item = e.data.children
	})

	window.onresize = () => {
		charts.resize()
	}
}
export const initPie = () => {
	const store = useCounterStore();
	const chart = echarts.init(document.querySelector('.box-left-pie') as HTMLElement)
	chart.setOption({
		backgroundColor: '#223651',
		tooltip: {
			trigger: 'item'
		},
		series: [
			{
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: true,
				itemStyle: {
					borderRadius: 4,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: true,
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '10'
					}
				},
				data: store.cityDetail.map(v => {
					return {
						name: v.city,
						value: v.nowConfirm
					}
				})
			}
		]
	})

	window.onresize = () => {
		chart.resize();
	}
}
export const initLint = () => {
	const store = useCounterStore();
	const chart = echarts.init(document.querySelector('.box-left-line') as HTMLElement);
	chart.setOption({
		backgroundColor: '#223651',
		grid: {
			left: '13%',
			top: '10%',
			right: '5%',
			bottom: '16%'
		},
		tooltip: {
			trigger: 'axis'
		},
		xAxis: {
			type: 'category',
			data: store.cityDetail.map(v => v.city),
			axisLine: {
				lineStyle: {
					color: "#fff"
				}
			},
			axisLabel: {
				interval: 0,
				formatter: (val: string) => val.split("").join("\n"),
			},
			fontSize: 10
		},
		yAxis: {
			type: 'value',
			axisLine: {
				lineStyle: {
					color: "#fff"
				}
			}
		},
		label: {
			show: true
		},
		series: [
			{
				data: store.cityDetail.map(v => v.confirm),
				type: 'line',
				smooth: true
			}
		]
	})

	window.onresize = () => {
		chart.resize();
	}
}
